<template>
    <div id="search">
        <div class="topbox">
            <img src="http://img.xianyufanshen.net//search/sousuo@2x.png" alt="">
            <input  v-show="lang=='zh'" v-model="keywords"  type="text" placeholder="请输入要搜索的内容"  @keyup.enter="searchEnter(keywords)">
            <input  v-show="lang=='en'" v-model="keywords" type="text" placeholder="Enter the content to search for" @keyup.enter="searchEnter(keywords)">
            <div v-show="lang=='zh'" class="cancel" @click="gotoIndex">取消</div>
            <div v-show="lang=='en'" class="cancel"  @click="gotoIndex">cancel</div>
        </div>
        <div class="historybox">
            <p v-show="lang=='zh'">历史搜索</p>
            <p v-show="lang=='en'">history</p>
            <span class="history" v-for="(item,index) in history" :key="index" @click="searchEnter(item.search_word)">{{item.search_word}}</span>
        </div>
        <div class="bottombox" v-show="lang=='zh'" @click="clearhistory">清空搜索历史</div>
        <div class="bottombox" v-show="lang=='en'" @click="clearhistory">clear&nbsp;history</div>
    </div>
</template>
<script>
import {Toast} from 'vant';
import { getHistoryseach , postSearch ,postclearHistory} from '@/api/search'
export default {
    name:'search',
    //声明组件
    components:{
        [Toast.name]:Toast,
    },
    data (){
        return{
            lang:'zh',//语言环境
            userId:0,//用户ID
            history:[],  //历史搜索记录
            keywords:'', //搜索的关键字
        }
    },
    //实例创建完成后被立即调用
    created (){
        this.getLang();
        this.getUserId();
        this.getHistory();
    },
    //监听
    watch:{

    },
    //计算属性
    computed:{

    },
    //
    methods:{
        //获取用户ID
    	getUserId(){
            if(this.$route.query.userId && this.$route.query.userId > 0){
    			this.userId = this.$route.query.userId;
    		}else{
                //获取缓存内的用户ID
                this.userId = window.localStorage.getItem("userId");
            }
        },
        //获取语言环境
         getLang(){
            if(this.$route.query.lang){
    			this.lang = this.$route.query.lang;
    		}
        },
        //获取历史搜索记录
        getHistory(){
            getHistoryseach(this.userId).then(res=>{
				if(res.code==200){
					if(res.data.length > 0){
                        this.history = res.data;
					}else{
                        this.history = [];
                    }
                }else{
                    Toast(res.msg)
                }
            });
        },
        //搜索
        searchEnter(keywords){
            let para = {};
            var title = '';
            if(this.lang == 'zh')
                title = '搜索结果';
            else 
                title = 'Search Result';
            para.title = title;
            para.url = "/searchResult?userId="+this.userId + "&lang="+this.lang + "&keywords="+keywords;
            this.keywords ='';
            this.interaction.hLink(para);
        },
        //清空搜索历史
        clearhistory(){
            postclearHistory(this.userId,this.lang).then(res=>{
                if(res.code==200){
                   this.history = res.data;
                }else{
                    Toast(res.msg)
                    //this.history= [];
                }
            });
        },
        //取消
        gotoIndex(){
            this.keywords = '';
            let para = {};
            para.linkType = "index";
            this.interaction.hLinkToApp(para);	
        }
    }
    
}
</script>

<style lang="stylus" scoped>
*{
    box-sizing :border-box;
}
#search{
    .topbox{
        width :100%;
        height :1.706667rem;
        background-color :#000;
        padding-left :.4rem;
        position :relative;
        input{
            //width :8.08rem;
            width:77%;
            height .826667rem;
            line-height :.826667rem;
            padding-left :1.066667rem;
            
            background-color:rgba(255,255,255,0.2);
            border-radius:100px;
            position:absolute;
            left :.4rem;
            bottom :.16rem;
            color: #a2a2a2;
            font-family:PingFangSC-Regular;
            font-size:.373333rem;
            letter-spacing:.005067rem;
            text-align:left;
        }
        img{
            width :.346667rem;
            height :.346667rem;
            position:absolute;
            left :.826667rem;
            bottom :.373333rem;
        }
        .cancel{
            //width :1.466667rem;
            width :20%;
            height :.826667rem;
            line-height :.826667rem;
            position:absolute;
            right:0;
            bottom :.16rem;
            font-family:PingFangSC-Regular;
            font-size:.346667rem;
            color:#ffffff;
            letter-spacing:0;
            text-align:center;
        }
    }
    .historybox{
        width:100%;
        height :auto;
        background-color :#fff;
        padding :.266667rem .4rem;
        border-bottom :.026667rem solid #f1f1f1;
        p{
            font-family:PingFangSC-Regular;
            font-size:.32rem;
            color:#989898;
            letter-spacing:0;
            text-align:left;
        }
        .history{
            margin-right :.266667rem;
            max-width :4.613333rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top :.293333rem;
            height :.693333rem;
            line-height :.693333rem;
            padding :0 .4rem;
            display: inline-block;
            background:#f3f3f3;
            border-radius:100px;
            font-family:PingFangSC-Regular;
            font-size:.346667rem;
            color:#494949;
            letter-spacing:0;
            text-align:center;
        }
    }
    .bottombox{
        width:100%;
        height :1.2rem;
        line-height :1.2rem;
        background-color :#fff;
        text-align :center;
        font-family:PingFangSC-Regular;
        font-size:.346667rem;
        color:#989898;
        letter-spacing:0;
        text-align:center;
    }
    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #a2a2a2;
    }
    input:-moz-placeholder, textarea:-moz-placeholder {
        color: #a2a2a2;
    }
    input:-ms-input-placeholder, textarea:-ms-input-placeholder {
        color: #a2a2a2;
    }
}
</style>


